<script setup lang="ts">
    import { computed, onMounted, ref } from 'vue'
    import _ from 'lodash'
    const props=defineProps<{
      list:any[]
    }>()
    // 定义数据
    const container=ref<HTMLDivElement|null>(null)// 定义容器
    const vlist=ref<HTMLDivElement|null>(null)// 定义列表
    const containerHeight=ref(0)// 定义容器高度
    const itemHeight=ref(0) // 改为响应式变量（初始为0，后续动态测量）
    const startIndex=ref(0)// 定义起始索引
    const endIndex=ref(0)// 定义结束索引
    const pageItems=ref(0)// 定义每页显示的项数
    const offset=ref(0)// 定义偏移量

    // 定义方法
    const handleScroll= _.throttle(()=>{
        if(!container.value || itemHeight.value === 0) return // 避免高度未测量时计算错误
        const scrollTop=container.value.scrollTop
        const newStartIndex=Math.floor(scrollTop/itemHeight.value) // 使用动态高度

        // 限制 scrollTop 在合理的范围内
        startIndex.value=Math.max(0,newStartIndex)
        endIndex.value=Math.min(startIndex.value+pageItems.value,props.list.length)
        if(endIndex.value<props.list.length-1){// 还有更多数据
          endIndex.value+=1
        }
        // 更新偏移量（使用动态高度）
        offset.value=startIndex.value * itemHeight.value
    },16) // 使用 16ms(60fps) 的节流函数

    // 定义生命周期
    onMounted(()=>{
      if(container.value && props.list.length > 0) {
        // 获取容器高度
        containerHeight.value=container.value.parentElement?.offsetHeight as number
        
        // 测量第一个列表项的实际高度（假设所有项高度一致）
        // 注意：需等待列表渲染完成后测量，可通过 $nextTick 确保 DOM 更新
        setTimeout(() => { // 简单延迟确保 DOM 渲染完成（更严谨方案用 nextTick）
          const firstItem = container.value?.querySelector('li');
          if (firstItem) {
            itemHeight.value = firstItem.offsetHeight; // 动态设置高度（包含 padding 和 border）
          }
          // 计算每页显示的项数（使用动态高度）
          pageItems.value=Math.ceil(containerHeight.value/itemHeight.value)
          endIndex.value=pageItems.value // 初始时只显示一页
        }, 0);
      }
    })

    // 定义计算属性
    const detaList=computed(()=>props.list.slice(startIndex.value,endIndex.value+1))
</script>
<template>
  <div ref="container" class="container" :style="{
    overflow: 'auto',// 允许滚动
    height: `${containerHeight}px`,// 设置容器高度
    position: 'relative',// 相对定位
  }" @scroll="handleScroll">
    <!-- 总高度根据动态 itemHeight 计算 -->
    <div :style="{height:`${itemHeight * props.list.length}px`}"></div>
    <div ref="vlist" :style="{
      position: 'absolute',// 绝对定位
      top: 0,
      left: 0,
      right: 0,
      transform: `translateY(${offset}px)`,// 平移列表（使用动态偏移量）
    }">
        <ul style="list-style: none; padding: 0; margin: 0;" >
            <!-- 移除固定 height，让内容自动撑开（或保留动态绑定） -->
            <li v-for="item in detaList" :key="item._id" :style="{padding:'5px',borderBottom:'1px solid #eee'}">
              <h4 v-if="item.course_name">课程名称：{{ item.course_name}}</h4>
              <p>{{ item.description }}</p>
              <h4 v-if="item.student_id">学生学号：{{ item.student_id}}</h4>
              <p v-if="item.student_name">学生姓名：{{ item.student_name }}</p>
            </li>
        </ul>
    </div>
  </div>
</template>

<style scoped>
</style>